import { useState } from 'react';
import StartupScreen from './components/StartupScreen';
import LoginScreen from './components/LoginScreen';
import Layout from './components/Layout';
import './App.css';

// 应用程序状态
interface AppState {
  currentView: 'startup' | 'login' | 'main';
  loggedInUserType: 'passenger' | 'safety_officer' | null;
}

function App() {
  console.log('App component rendering');
  
  // 初始化应用状态
  const [appState, setAppState] = useState<AppState>({
    currentView: 'startup',
    loggedInUserType: null
  });
  
  // 处理启动完成
  const handleStartupComplete = () => {
    setAppState(prev => ({ ...prev, currentView: 'login' }));
  };
  
  // 处理登录成功
  const handleLogin = (userType: 'passenger' | 'safety_officer') => {
    setAppState(prev => ({
      ...prev,
      currentView: 'main',
      loggedInUserType: userType
    }));
  };

  // 根据当前状态渲染不同的界面
  switch (appState.currentView) {
    case 'startup':
      return <StartupScreen onComplete={handleStartupComplete} />;
    case 'login':
      return <LoginScreen onLogin={handleLogin} />;
    case 'main':
      return appState.loggedInUserType ? 
        <Layout userType={appState.loggedInUserType} /> : 
        <LoginScreen onLogin={handleLogin} />;
    default:
      return <StartupScreen onComplete={handleStartupComplete} />;
  }
}

export default App;
